<template>
  <div id="oneday-active">
    <div id="oneday-active-title">
      <div class="oneday-active-title">
        <img src="static/img/yellow-con.png" class="oneday-active-img1">
        <img src="static/img/yellow-con.png" class="oneday-active-img2">
        <img src="static/img/yellow-con.png" class="oneday-active-img3">
        <img src="static/img/yellow-con.png" class="oneday-active-img4">
        <img src="static/img/blue-con.png" class="oneday-active-img9">
        <img src="static/img/blue-con.png" class="oneday-active-img10">
        <img src="static/img/blue-con.png" class="oneday-active-img11">
        <img src="static/img/blue-con.png" class="oneday-active-img12">
        <span>车辆24小时活跃数</span>
      </div>
    </div>
    <div id="oneday-active-chart"></div>
  </div>
</template>

<script>
//  import getLocalTime from ''
  export default {
    name : "oneday-active",
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        hours:[],
        counts:[],
        timeList : 1513645200000
      }
    },
    mounted() {
      this.drawCross();
      this.changeTimeList()
    },
    methods :{
      drawCross : function () {
        let crossChart = echarts.init(document.getElementById('oneday-active-chart'));
        crossChart.setOption({
          backgroundColor: 'rgba(7,34,31,0.80)',
          tooltip: {
            trigger: 'none',
            axisPointer: {
              type: 'cross'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '3%',
            bottom: '5%',
            top: '10%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              axisLine: {
                lineStyle: {
                  color: '#7AE9E5',
                  type: 'solid',
                  width:'1'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#7AE9E5'
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              min: 10000,
              axisLine: {
                lineStyle: {
                  color: '#7AE9E5',
                  type: 'solid',
                  width:'1'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#7AE9E5'
                }
              }
            }
          ],
          series: [
            {
              name:'2016 降水量',
              type:'line',
              smooth: true,
              areaStyle: {normal: {}},
              data: [],
              lineStyle:{
                color:'#4FDAD7'
              },
              itemStyle : {
                normal : {
                  color:new echarts.graphic.LinearGradient(0,0,0,1,[{
                    offset: 0,
                    color: '#4FDAD7'
                  },{
                    offset: 1,
                    color: '#052323'
                  }])
                }
              }
            }
          ]
        });
        var hours = [];
        var counts = [];

        $.ajax({
          type : 'get',
          async :true,
          url: 'http://203.81.245.37:2420/platformservice/left/' +this.timeList ,
          data : {},
          dataType: 'json',
          success : function (result) {

//            console.log("----------------------------------");
//            console.log(result);
            if (result) {
              let result_oneday = result.oneday;
              for (var k=0;k<result_oneday.length;k++) {
                hours.push(result_oneday[k].hour)
              }
              for (var k=0;k<result_oneday.length;k++) {
                counts.push(result_oneday[k].count)
              }
//              var t1 = new Date(hours[0]).getHours() +":00";
//              var t2 = new Date(hours[1]).getHours() +":00";
//              var t3 = new Date(hours[2]).getHours() +":00";
//              var t4 = new Date(hours[3]).getHours() +":00";
//              var t5 = new Date(hours[4]).getHours() +":00";
//              var t6 = new Date(hours[5]).getHours() +":00";
//              var t7 = new Date(hours[6]).getHours() +":00";
//              var t8 = new Date(hours[7]).getHours() +":00";
//              var t9 = new Date(hours[8]).getHours() +":00";
//              var t10 = new Date(hours[9]).getHours() +":00";
//              var t11 = new Date(hours[10]).getHours() +":00";
//              var t12 = new Date(hours[11]).getHours() +":00";
//              var t13 = new Date(hours[12]).getHours() +":00";
//              var t14 = new Date(hours[13]).getHours() +":00";
//              var t15 = new Date(hours[14]).getHours() +":00";
//              var t16 = new Date(hours[15]).getHours() +":00";
//              var t17 = new Date(hours[16]).getHours() +":00";
//              var t18 = new Date(hours[17]).getHours() +":00";
//              var t19 = new Date(hours[18]).getHours() +":00";
//              var t20 = new Date(hours[19]).getHours() +":00";
//              var t21 = new Date(hours[20]).getHours() +":00";
//              var t22 = new Date(hours[21]).getHours() +":00";
//              var t23 = new Date(hours[22]).getHours() +":00";
//              var t24 = new Date(hours[23]).getHours() +":00";
//              console.log(nowdate);
              var hours1 = ["0:00","1:00","2:00","3:00","4:00","5:00","6:00","7:00","8:00","9:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00"];
//              var hours1 = [t1,t2,t3,t4,t5,t6,t7,t8,t9,t10,t11,t12,t13,t14,t15,t16,t17,t18,t19,t20,t21,t22,t23,t24,];
//              console.log(t2);
//              console.log(hours);
//              console.log(counts);
              crossChart.setOption({
                xAxis: {
                  data:hours1
                },
                series: [{
                  name :'2016 降水量',
                  data :counts
                }]
              })
            }
          }
        })
      },
      changeTimeList : function () {
        var timeList = [1514422800000,1514336400000,1514250000000,1514163600000,1514077200000,1513990800000,1513904400000,1513818000000,1513731600000,1513645200000];
        var j = 0;
        setInterval( () => {
          this.timeList = timeList[j];
//          console.log(timeList[j]);
          if (j < timeList.length-1){
            j+=1;
          }else {
            j = 0;
          }
          this.drawCross();
        },60000)
      }
    }
  }
</script>

<style>
  #oneday-active {
    height: 260px;
    width: 440px;
    position: relative;
  }
  #oneday-active-title {
    height: 40px;
    width: 438px;
    background: rgba(7, 34, 31, 0.8);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(32, 221, 201, 0.8);
    border-image: initial;
  }
  .oneday-active-title {
    height: 30px;
    width: 428px;
    position: absolute;
    top: 6px;
    left: 6px;
    font-family: MicrosoftYaHeiUI;
    text-align: left;
    text-indent: 4px;
    font-size: 18px;
    line-height: 30px;
    color: rgb(239, 187, 66);
    letter-spacing: -0.45px;
    background: rgba(0, 158, 158, 0.2);
  }
  #oneday-active-chart {
    height: 217px;
    width: 438px;
    border: 1px solid rgba(32,221,201,0.80);
    /*background: rgba(7,34,31,0.80);*/
  }
  .oneday-active-img1 {
    position: absolute;
    top: -7px;
    left: -7px;
    z-index: 3;
  }
  .oneday-active-img2 {
    position: absolute;
    top: -7px;
    left: 429px;
    transform: rotate(90deg);
    z-index: 3;
  }
  .oneday-active-img3 {
    position: absolute;
    top: 32px;
    left: 429px;
    transform: rotate(180deg);
    z-index: 3;
  }
  .oneday-active-img4 {
    position: absolute;
    top: 32px;
    left: -7px;
    transform: rotate(270deg);
    z-index: 3;
  }
  .oneday-active-img9 {
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 3;
  }
  .oneday-active-img10 {
    position: absolute;
    top: -1px;
    left: 425px;
    transform: rotate(90deg);
    z-index: 3;
  }
  .oneday-active-img11 {
    position: absolute;
    top: 27px;
    left: 425px;
    transform: rotate(180deg);
    z-index: 3;
  }
  .oneday-active-img12 {
    position: absolute;
    top: 27px;
    left: -1px;
    transform: rotate(270deg);
    z-index: 3;
  }
</style>
